<template>
    <div>
        <a-modal v-model:visible="visible" title="编辑" @ok="handleOk">
            <div style="height: 500px;overflow: scroll;">
                <a-descriptions layout="vertical" bordered>
                    <a-descriptions-item>
                        <div v-for="item in datakey" class="showModelData_item">{{ item.label }}</div>
                    </a-descriptions-item>
                    <a-descriptions-item>
                        <template v-for="(item, key) in dataval" :key="key">
                            <a-input v-model:value="dataval[key]"
                                style="width: 100%;display: flex;flex-direction: column;" />
                        </template>
                    </a-descriptions-item>
                </a-descriptions>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue';
import { useStore } from "vuex";
import {
    getData
} from '@api/data.js'
import { message } from 'ant-design-vue';
const visible = ref(false)
const datakey = ref([])
const dataval = ref([])
const handleOk = () => {
    visible.value = false;
};
const type = ref('')
const id = ref(-1)
watch(stateData, (newVal, oldVal) => {
    console.log(newVal, oldVal)
    type.value = newVal.type
    id.value = newVal.id
    _getData(type.value, id.value)
    saveData(type.value, id.value)
}, { immediate: true, deep: true })

defineExpose({
    handleOk,
    visible
})

function _getData(type, id) {
    if (type === 'Province') {
        getData(id, 'GET').then(res => {
            dataval.value = res.data
            console.log(dataval.value)
        })
        getData(id, 'OPTIONS').then(res => {
            datakey.value = res.data.fields
        })
    }
}
function saveData(type, id) {
    if (type === 'Province') {
        ProvinceEdit(id,).then(res => {
            dataval.value = res.data
        })
    }
}
</script>

<style lang="less" scoped>
.showModelData_item {
    width: 100%;
    text-align: center;
    padding: 5px;
}

.showModelData_item:nth-child(odd) {
    background-color: rgb(240, 240, 240);
}

::v-deep .ant-modal-body {
    width: 500px !important;
    overflow: scroll;
}

::v-deep .ant-descriptions-item-content {
    padding: 0 !important;
}

::v-deep.ant-descriptions-item-content {
    padding: 0;
}
</style>
